<template>
  <div>
    <!--面包屑-->
    <breadcrumb></breadcrumb>
    <!-- 卡片-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <search :list="userList" @clearSearch="clearSearch" @searchData="searchData"></search>
        <add></add>
      </el-row>
      <!-- 用户列表-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="userName" label="昵称"></el-table-column>
        <el-table-column prop="userPwd" label="密码"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!--封禁按钮-->
            <el-tooltip effect="dark" content="封禁操作" placement="top" :enterable="false">
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="closeTime(scope.row.userName)"
              ></el-button>
            </el-tooltip>
            <!--删除按钮-->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deletes(scope.row.userName)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import breadcrumb from '../breadcrumb.vue'
import search from '../search.vue'
import add from './add.vue'
export default {
  data() {
    return {
      userList: [],
      dataList: [],
      scope: ''
    }
  },
  created() {
    this.comm.getUserList(1).then(async data => {
      await data.forEach(item => {
        item.role = item.level === 0 ? '普通用户' : '管理员'
        this.userList.push(item)
      })
      this.dataList = await this.userList
    })
  },
  methods: {
    searchData(data) {
      this.dataList = data
    },
    clearSearch() {
      this.dataList = this.userList
    },
    // 删除
    async deletes(scope) {
      this.comm.deletes(scope, '/deleteuser/', this).then((res) => {
        if (!res) {
          return
        }
        this.comm.ArrSplice(this.dataList, 'userName', scope)
      })
    },
    // 封禁操作
    async closeTime(scope) {
      const promptRes = await this.$prompt('请输入天数', '封禁:' + scope, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d{1,}$/,
        inputErrorMessage: '格式不正确'
      }).catch(err => err)
      if (promptRes === 'cancel') {
        return
      }
      this.$Message.success('封禁用户成功')
    }
  },
  components: {
    breadcrumb,
    add,
    search
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 15px;
}
</style>
